<template>
  <el-aside class="aside" width="165px">
    <el-menu
      unique-opened
      background-color="#545c64"
      active-text-color="#ffd04b"
      text-color="#fff"
      router
    >
      <el-menu-item active class="indexMenu" index="/welcome"
        ><i class="icon-logo"></i>首页</el-menu-item
      >
      <div v-for="(v, i) in $store.state.nav" :key="i">
        <el-submenu :index="v.Navpath">
          <template slot="title">
            <i :class="v.NavIcon"></i>
            <span>{{ v.NavTitle }}</span>
          </template>
          <el-menu-item
            text-color="rad"
            v-for="(j, f) in v.Navchildren"
            :key="f"
            :index="j.Navpath"
            >{{ j.NavTitle }}</el-menu-item
          >
        </el-submenu>
      </div>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style scoped>
.indexMenu {
  display: flex;
  align-items: center;
}

.aside {
  overflow: hidden;
}

.el-aside {
  color: #fff;
  background-color: #545c64;
  height: 100vh;
}

.icon-logo {
  display: block;
  width: 40px;
  height: 70%;
  background: url(../../../assets/img/indexLogo.png) no-repeat;
  background-size: contain;
  margin-right: 5px;
}

.my-icon-member {
  margin: 0 5px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("../../../assets/img/member.png");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
